<script>
import {defineComponent} from 'vue'

import {loginUser, userAvatar} from "@/api/login";

export default defineComponent({
    name: "personalCenter",
    data() {
        return {
            tabPosition: 'left',
            userInfo: {}
        }
    },
    created() {
        loginUser().then(res => {
            if (res.code === 0) {
                this.userInfo = res.data
                console.log(this.userInfo)
            }
        })
    },

    methods: {
        change(e){
            console.log(e.target.files[0])
            userAvatar({file:e.target.files[0]}).then(res=>{
                console.log(res)
                if (res.code===0){
                    this.userInfo = res.userInfo

                }
            })
        },
        callback(key) {
            console.log(key);

        }

    },
})
</script>

<template>
    <div>
        <div class="body">
            <div class="navigation">
                <div class="left-nav">
                    <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt=""/>
                    <div class="ul">
                        <ul>
                            <li >首页</li>
                            <li id="course">
                                课程分类 ∨
                                <ul class="course-ul"></ul>
                            </li>
                            <li>教学管理云平台</li>
                        </ul>
                    </div>
                </div>
                <span class="center-span">
      <input placeholder="搜索课程~" type="text" size="large" class="input"/>
      <button>
        <img
            src=""
            alt=""/>
      </button>
    </span>
                <div class="right-login">
                    <div class="shopping-cart">
                        <img
                            src=""
                            alt=""/>
                    </div>
                    <div class="login-box">
                        <div class="btn-log">登录/注册</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0;background: #f4f4f4;overflow: hidden">
            <div id="box">
                <div id="bodyBox">
                    <div id="leftTab">
                        <a-radio-group v-model="tabPosition" style="margin:8px">
                        </a-radio-group>
                        <a-tabs default-active-key="1" :tab-position="tabPosition">
                            <a-tab-pane key="1" tab="我的主页">
                                <header style="font-size: 22px;">个人信息</header>
                                <div id="textBox">
                                    <div id="informationList">
                                        昵称
                                        <a>修改</a>
                                        <br>
                                        <span>{{ this.userInfo.nickname }}</span>
                                    </div>
                                    <div id="informationList">
                                        手机号
                                        <a>修改</a>
                                        <br>
                                        <span>{{this.userInfo.mobile}}</span>
                                    </div>
                                    <div id="informationList">
                                        密码
                                        <a>修改</a>
                                        <br>
                                        <span>******</span>
                                    </div>
                                    <div id="informationListOne">
                                        <span style="position: relative">
                                            <div style="height: 100px;width: 100px ">
                                                <img :src="userInfo.avatarUrl"
                                                     alt="" style="width: 100%;height: 100%">
                                            </div>

                                            <br>

                                            <div style="display: inline-block; position: absolute;left: 0;top: 50px;width: 100px">
                                                <span id="top">
                                                    <button id="btn" style="z-index: 1; left: 100px; top: 10px">
                                                        <i data-v-407ac5f9="" aria-label="icon: upload"
                                                           class="anticon anticon-upload"><svg data-v-407ac5f9=""
                                                                                               viewBox="64 64 896 896"
                                                                                               data-icon="upload"
                                                                                               width="1em" height="1em"
                                                                                               fill="currentColor"
                                                                                               aria-hidden="true"
                                                                                               focusable="false"
                                                                                               class=""><path
                                                                d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></i>
                                                        <span style="margin-left: 8px;">更改头像</span>
                                                        <input type="file"  @change="change" style="opacity:0;margin-left:-90px;font-size: 20px">
                                                    </button>
                                                </span>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="我的课程">
                                <a-tabs default-active-key="1" @change="callback">
                                    <a-tab-pane key="1" tab="正在学习">
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane key="2" tab="我的收藏" force-render>
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane key="3" tab="我的报名">
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane key="4" tab="观看记录">
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                </a-tabs>
                            </a-tab-pane>
                            <a-tab-pane key="3" tab="我的订单">
                                <a-tabs default-active-key="1" @change="callback">
                                    <a-tab-pane key="1" tab="全部订单">
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane key="2" tab="等待付款" force-render>
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane key="3" tab="付款成功">
                                        <div class="ant-empty" style="margin-bottom: 10px">
                                            <div style="">
                                                <img src=""
                                                     alt="">
                                                <p>暂无数据...</p>
                                            </div>
                                        </div>
                                    </a-tab-pane>
                                </a-tabs>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<style scoped lang="less">
ul {
    list-style: none;
}

li {
    list-style: none;
}

.navigation {
    align-items: center;
    display: flex;
    margin: 0 auto;
    width: 1160px;
    height: 80px;
}

.navigation > .left-nav {
    margin-right: 30px;
    margin-left: 40px;
    height: 30px;
    font-weight: 600;
    float: left;
    display: flex;
}

.navigation > .left-nav > img {
    width: 132px;
    height: 40px;
}

.navigation > .left-nav > .ul {
    list-style-type: none;
    height: 30px;
    font-weight: 600;
    float: left;
    margin-left: 30px;
}

.navigation > .left-nav > .ul > ul {
    display: flex;
    width: 340px;

}

.navigation > .left-nav > .ul > ul > li {
    margin-right: 30px;
    list-style: none;

}

.course {
    position: relative;
}

.course-ul {
    color: black;
    display: none;
    position: absolute;
    z-index: 100;
    list-style-type: none;
    background-color: white;
    padding: 3px;
}

.course-li {
    margin-left: 2px;
    height: 30px;
    line-height: 30px;
    z-index: 100;
}

.course-a {
    font-weight: 300;
    font-size: 15px;
    color: rgb(120, 118, 118);
}

.center-span {
    display: flex;
    margin-left: 150px;
}

.center-span > .input {
    outline: none;
    height: 39px;
    border-radius: 20px;
    float: left;
    width: 250px;
    margin-bottom: 0;
    text-align: inherit;
    padding: 6px 11px;
    font-size: 16px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.center-span > button {
    background: transparent;
    border-radius: 20px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 39px;
    width: 50px;
    border: 1px solid #d9d9d9;
    background-color: rgb(0, 178, 120);;
}

.right-login {
    height: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 150px;
}

.right-login > .shopping-cart {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.right-login > .login-box {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.right-login > .login-box > .top-img {
    position: absolute;
    font-size: 10px;
    top: -50px;
    width: 155px;
    height: 41px;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    background: url();
    background-size: 100%;
    color: #fff;
}

.right-login > .login-box > .btn-log {
    color: rgb(53, 199, 222);
    width: 94px;
    height: 30px;
    background: #fff;
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}

#box {
  width: 1160px;
  margin: auto;
  margin-top: 15px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 20px;
}

#bodyBox {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  position: relative;
  overflow: hidden;
  zoom: 1;
}

#leftTab {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  position: relative;
  overflow: hidden;
  zoom: 1;
}

*, :after, :before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#textBox {
  padding: 40px;
  font-size: 20px;
  color: #333;
  line-height: 40px;
}

#informationList {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

#informationListOne {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

#informationList > a {
  font-size: 14px;
  color: #00cf8c;
}

#btn {
  line-height: 1.499;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
  cursor: pointer;
  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 2px;
  color: rgba(0, 0, 0, .65);
  background-color: #fff;
  border-color: #d9d9d9;
  width: 100px;
  height: 40px;
}

#top {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
}

.ant-empty {
  margin: 0 8px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.a {
  margin-bottom: 500px;
}
</style>